<template>
  <div>
    <h1>用户中心</h1>
    <el-row>
      <el-col span="12">
        <el-tabs tab-position="left" style="height: 450px">
          <el-tab-pane label="修改密码">
            <el-form ref="form" :model="passwordData" label-width="80px">
              <el-form-item label="标题">
                <el-input
                    v-model="passwordData.oldPassword"
                    show-password
                    placeholder="输入旧密码"
                    required="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="标题">
                <el-input
                    v-model="passwordData.newPassword"
                    show-password
                    placeholder="输入新密码"
                    required="true"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                    type="primary"
                    @click="modifyPassword"
                    style="float: right"
                >提交
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="用户管理">
            <el-form ref="form" :model="userData" label-width="80px">
              <el-form-item label="用户名">
                <el-input
                    v-model="userData.userName"
                    placeholder="输入用户名"
                    required="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                    v-model="userData.email"
                    placeholder="输入邮箱"
                    required="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input
                    v-model="userData.telephone"
                    placeholder="输入联系电话"
                    required="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="单位">
                <el-input
                    v-model="userData.depart"
                    placeholder="输入单位"
                    required="true"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addUser" style="float: right"
                >提交
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="历史记录">
            <el-form ref="form" :model="historyData">
              <el-form-item>
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 15, maxRows: 20 }"
                    v-model="historyData.content"
                    placeholder="历史记录"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "UserCenter",
  data() {
    return {
      passwordData: {
        oldPassword: "",
        newPassword: "",
      },
      userData: {
        userName: "",
        email: "",
        telephone: "",
        depart: "",
      },
      historyData: {
        content: "",
      },
    };
  },
  methods: {
    modifyPassword() {
    },
    addUser() {
    },
  },
};
</script>

<style scoped></style>
